<template>
	<view class="warp" :style="[{ paddingTop: StatusBar + 'px' }]">
		<!-- background pic start -->
		<view class="bg">
			<!-- <image src="../../static/login-bg.png" mode="aspectFit" class="bg_img"></image> -->
			<view class="logo-contnt">
				<view class="logo">
					<image src="../../../../static/logo.png" mode="aspectFit" class="image"></image>
				</view>
				<!-- <view class="desc text-bold">欢迎来到商家端</view> -->
			</view>
		</view>
		<!-- background pic end -->

		<!-- 验证码login start -->
		<view class="form-wapper">
			<view class="block-box">
				<view class="title">
					<image class="image" :src="image1" mode="widthFix"></image>
				</view>
				<input type="number" focus v-model="phone" maxlength="11" placeholder-class="placeholderClass"
					placeholder='请输入手机号' name="input" />
			</view>
			<view class="block-box">
				<view class="title">
					<image class="image" :src="image2" mode="widthFix"></image>
				</view>
				<view class="pwd">
					<input placeholder-class="placeholderClass" v-if="type == 'password'" type="password"
						v-model="password" placeholder='请输入密码(6~12位字母+数字)' minlength="6" maxlength="12" />
					<input placeholder-class="placeholderClass" v-if="type == 'text'" type="text" v-model="password"
						placeholder='请输入密码(6~12位字母+数字)' minlength="6" maxlength="12" />
					<view class="pwd-right">
						<image :src="image3" :data-type="type" @click.stop="is_kejian"
							v-if="type == 'text'" mode="widthFix"></image>
						<image :src="image4" class="close" :data-type="type" @click.stop="is_kejian"
							v-if="type == 'password'" mode="widthFix"></image>
					</view>
				</view>
			</view>

			<view class="paw flex justify-between margin-top" style="padding: 12rpx 56rpx;">
				<view @tap="handleJump" data-url="/shop/shop/shop-come/index"  class="text-999">注册新账号</view>
				<view @click="handleJump" :data-url="PAGE_BASE_URL + 'forget/index'" class="wj_mh text-999">忘记密码?</view>
				<!-- <view @click="handleJump" data-type="REDIRECT" :data-url="PAGE_BASE_URL + 'login-code/index?phone='+phone">注册新账号</view> -->
				<!-- <text class="" style="color: #1A76F2;">申请入驻</text> -->
			</view>


		</view>
		<!-- 验证码login end -->

		<!-- 立即登录按钮 start -->
		<button :loading="is_click" class="login-btn" shape="circle" @click="handleLogin">
			登录
		</button>
		<button class="login-btn2" @click="handleJump" data-type="REDIRECT"
			:data-url="PAGE_BASE_URL + 'login-code/index?phone='+phone">验证码登录</button>
		<!-- 立即登录按钮 end -->

		<!-- <view class="reg-paw flex justify-center" @tap="handleJump" data-url="/pages/shop/shop/shop-come/index"  v-if="is_hidden!='1'">
	  <text>还没成为我们的伙伴？</text>
	   <text class="" style="color: #1A76F2;">申请入驻</text>
	   <button class="cu-btn round action-btn2"  @click="gopassword">验证码登录</button>
	 </view> -->

		<!-- <view class="reg-paw">
      <text @tap="handleJump" data-type="REDIRECT" :data-url="PAGE_BASE_URL + 'register/index'">注册账号</text>
      <text @click="handleJump"  :data-url="PAGE_BASE_URL + 'forget/index'" class="wj_mh">忘记密码</text>
    </view> -->

		<!-- 快捷登陆 start -->
		<!--    <view class="quick">
      <view class="quick-title"><text class="line"></text>
        <text class="txt">快捷登录</text><text class="line"></text></view>
      <view class="sanfang">
        <image @click="wxLogin" src="../../static/login-quick-001.png" mode=""></image>
        <image @click="emailLogin" src="../../static/login-email.png" mode=""></image>
      </view>
    </view> -->
		<!-- 快捷登陆 end -->

		<!-- 协议同意 start -->
		<view class="box-bottom">
			<view class="agreement">
				<image class="image" @click="handle_select" v-if="is_select_agree" :src="image5">
				</image>
				<image class="image" @click="handle_select" v-else :src="image6"></image>
				<view> 点击登录即默认同意 <text @tap="handleJump" class="tz"
						data-url="/pages/user/login/user-agreement/index?id=43">《用户协议》</text>与<text @tap="handleJump"
						data-url="/pages/user/login/user-agreement/index?id=22" class="tz">《隐私政策》</text> </view>
			</view>
		</view>
		<!-- 协议同意 end -->
		<!-- 断网监测 start -->
		<fu-notwork></fu-notwork>
		<!-- 断网监测 end -->

	</view>
</template>
<script>
	import {
		validate
	} from "@/common/utils/index";
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				is_select_agree: false,
				phone: '', //手机号
				password: '', //密码
				is_click: false, //加载动画
				type: 'password', //密码类型
				PAGE_BASE_URL: '/pages/user/login/', // 页面基础路径
				is_hidden: 0,
				image1:require('../../static/phone.png'),
				image2:require('../../static/pwd.png'),
				image3:require('../../static/open.png'),
				image4:require('../../static/close.png'),
				image5:require('../../../user/static/checked.png'),
				image6:require('../../static/unchecked.png'),
			};
		},
		onLoad(options) {
			// #ifdef APP-PLUS
				//app启动时启动页手动关闭
				plus.navigator.closeSplashscreen();
			// #endif
			let {
				phone
			} = options;
			this.phone = phone;
			this.getConfig()
			
			
		},
		onUnload() {
			// 页面关闭时清除计时器，优化性能
			clearInterval(this.timer);
		},
		methods: {
			getConfig() {
				this.$api.post(global.apiUrls.postGetConfig, {
					code: 'operation'
				}).then(res => {
					console.log('getconfig', res);
					if (res.data.code == 1) {
						this.is_hidden = res.data.data.is_hidden;
					}
				}).catch(err => {
					console.log(err);
				})
			},
			/**
			 * @param 是否选择同意协议
			 */
			handle_select() {
				this.is_select_agree = !this.is_select_agree
			},

			//密码是否可见
			is_kejian(e) {
				let type = e.currentTarget.dataset.type;
				if (type == 'password') {
					this.type = 'text';
				} else {
					this.type = 'password';
				}
			},

			/**
			 * @description  立即登录
			 */
			handleLogin() {
				// #ifdef APP-PLUS
					plus.key.hideSoftKeybord();
				// #endif
				if (this.is_click) {
					return;
				}
				let {
					phone,
					password
				} = this;
				// 手机号不存在
				if (!phone) {
					this.$message.info('请输入手机号');
					return false;
				}

				// 选择用户协议
				if (!this.is_select_agree) {
					this.$message.info('请勾选用户协议');
					return false;
				}

				// 手机号不符合正则验证
				if (!validate(phone, 'phone')) {
					this.$message.info('请输入正确的手机号');
					return false;
				}
				// 密码不符合正则验证
				if (!validate(password, 'password')) {
					this.$message.info('请输入字母加数字6-12位密码');
					return false;
				}
				// let clientId = 'clientId'

				let appSystem = 'appSystem'
				let clientId = ''
				this.is_click = true;
				// postloginByAccount 账号密码登录接口
				this.$api.post(global.apiUrls.postloginByAccount, {
					user_type: 2,
					mobile: phone,
					password,
					clientId,
					appSystem
				}).then(res => {
					this.is_click = false;
					if (res.data.code == 1 && res.data.data) {
						let joinin_state = res.data.data.joinin_state;
						this.$store.commit('updateUserInfo', res.data.data.userinfo); // 修改vuex储存的用户信息
						console.log(res, 'iii',res.data.data.userinfo.id)
						const config = {
						  userID:  '' + res.data.data.userinfo.id, // User ID
						  SDKAppID: 1600032891, // Your SDKAppID
						  secretKey: res.data.data.userinfo.secretkey, // Your secretKey
						};
						uni.setStorageSync('timInfo', config);
						
						if (joinin_state != 5) {
							uni.navigateTo({
								url: '/shop/shop/shop-success/index'
							})
							return;
						}
						this.$message.info(res.data.msg); // 提示框
						
						let routes = getCurrentPages();
						setTimeout(() => {
							// 启动页跳转而来返回首页
							// if(routes.length == 1){
							console.log('第一')
							uni.switchTab({
								// url: '/pages/tab/home/home/index',
								url: '/pages/order/order/order-list/index'
							})
							// }else{
							// console.log('第二')
							// 	// 延迟800ms后返回
							// 	uni.navigateBack();
							// }

						}, 800);
					 } else {
						this.$message.info(res.data.msg); // 错误提示框pages/shop/shop/shop-pay/index
						if(res.data.msg == '待提交支付费用')  {
							uni.setStorageSync('store_joinin_id', res.data.data.store_joinin_id);
							uni.setStorageSync('store_user_id', res.data.data.store_user_id);
							uni.redirectTo({
								url: "/shop/shop/shop-success/index",
							});
						}
					}
				})
			},
			/**
			 * @event 跳转到邮箱登录页面
			 */
			emailLogin() {
				uni.redirectTo({
					url: "/pages/user/login/login-email-code/index",
				});
			},
			/**
			 * @event 微信登陆
			 */
			wxLogin() {
				let _this = this;
				// #ifdef APP-PLUS
				// 如果是app环境打开微信
				if (
					plus.runtime.isApplicationExist({
						pname: "com.tencent.mm",
						action: "weixin://",
					})
				) {
					uni.getProvider({
						service: "oauth",
						success: function(res) {
							console.log(res);
							// 如果支持微信等，就执行 wx_login_fn 方法
							if (~res.provider.indexOf("weixin")) {
								_this.wx_login_fn();
							}
						},
						fail: function(err) {
							// api错误是打印错误
							console.log(err);
						},
					});
				} else {
					// 调起失败时提醒用户
					this.$message.info("请安装微信后再使用此功能");
				}
				// #endif
			},
			/**
			 * @function 微信授权登录
			 */
			wx_login_fn() {
				let _this = this;
				/**
				 * @desc uniapp的登陆api
				 * @param {String} provider - 登录服务提供商
				 * @param {login~success} loginRes - 接口调用成功时的回调函数
				 */
				uni.login({
					provider: "weixin",
					/**
					 * @callback login~success
					 * @param {Object} loginRes - api返回来的信息
					 */
					success: function(loginRes) {
						/**
						 * @desc 获取用户信息
						 * @param {String} provider - 登录服务提供商
						 * @param {Funtion} success - 接口调用成功时的回调函数
						 */
						uni.getUserInfo({
							provider: "weixin",
							/**
							 * @callback success
							 * @param {Object} infoRes - api返回来的信息
							 */
							success: function(infoRes) {
								// 显示加载状态
								uni.showLoading({
									title: "加载中",
								});
								/**
								 * @let {String} nickName - 结构出来的变量昵称
								 * @let {String} avatarUrl - 解构出来的头像链接
								 * @let {String} gender - 结构出来的性别
								 */
								let {
									nickName,
									avatarUrl,
									gender
								} = infoRes.userInfo;
								// #ifdef APP-PLUS
								let clientId = ''
								// let clientId = plus.push.getClientInfo().clientid || "";
								console.log("clientId", clientId);
								//  @const {Number} appSystem - 判断设备类型 1：ios；2：安卓；
								let appSystem = uni.getSystemInfoSync().platform == "ios" ? 1 : 2;
								// #endif
								console.log(infoRes.userInfo.unionId, "app微信登录");
								/**
								 * @description 第三方登录请求接口
								 */
								_this.$api
									.post(global.apiUrls.postUserSocialLogin, {
										type: 1,
										wx_unionid: infoRes.userInfo.unionId,
										qq_unionid: "",
										wb_unionid: "",
										clientId: clientId || "",
										appSystem: appSystem || "",
										nickname: nickName,
										avatar: avatarUrl,
										gender: gender,
									})
									.then((res) => {
										// 保存用户信息
										global.tempUserLoginInfo = infoRes.userInfo;
										// 关闭加载效果
										uni.hideLoading();
										if (res.data.code == 1) {
											_this.$message.info(res.data.msg);
											/**
											 * @description 向Vux发送用户信息保存
											 * @param {String} updateUserInfo - 调用的方法名称
											 * @param {Object} res.data.data.userinfo - 用户信息
											 */
											_this.$store.commit(
												"updateUserInfo",
												res.data.data.userinfo
											);
											setTimeout(() => {
												uni.navigateBack();
											}, 800);
										} else if (res.data.code == -999) {
											/**
											 * @description 清除当前页面，跳转到绑定手机页面
											 */
											_this.$urouter.redirectTo({
												url: _this.PAGE_BASE_URL +
													"bind-phone/index",
												params: {
													unionId: infoRes.userInfo.unionId,
													openId: infoRes.userInfo.openId,
													sex: infoRes.userInfo.gender,
													nickName: infoRes.userInfo
														.nickName,
													avatarUrl: infoRes.userInfo
														.avatarUrl,
													authType: "wx_unionid",
												},
											});
											// 点击手机号账号登录按钮
										} else if (res.code == -1) {
											_this.$message.info(res.data.msg);
											return;
										}
									})
									.catch((err) => {
										uni.hideLoading();
										console.log(err);
									});
							},
						});
					},
					error: function(err) {
						uni.hideLoading();
						console.log(err);
					},
				});
			},
		},
	};
</script>
<style lang="scss">
	// 头部返回键 start
	.cu-bar .action {
		position: relative;
		z-index: 5;
	}

	// 头部返回键 end
	// 主体 start
	.warp {
		// background: #000;
		width: 100%;
		background: url('https://localelife.chunchuangkeji.cn/static/home_bg.jpg') no-repeat;
		background-size:100% 100%;
		min-height: 100vh;
		overflow: hidden;

		// background pic start
		.bg {
			height: 480rpx;
			width: 100%;

			.bg_img {
				height: 480rpx;
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}
		}

		.logo-contnt {
			width: 100%;
			height: 480rpx;
			overflow: hidden;

			.logo {
				margin-top: 190rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 16rpx;
				}
			}

			.desc {
				width: 100%;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				margin-top: 32rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				color: #333333;
			}

		}

		// background pic end



		// 验证码login start
		.margin_top_56 {
			margin-top: 56rpx;
		}

		.form-wapper {
			position: relative;
			z-index: 99;

			.block-box {
				margin: 0 60rpx;
				height: 90rpx;
				line-height: 90rpx;
				display: flex;
				align-items: center;
				position: relative;
				background-color: #fff;
				border-radius: 14rpx;
				border: 1rpx solid #DBDBDB;
				margin-bottom: 40rpx;
				// border: 1px solid ;
				.title {
					margin: 0 28rpx 0 28rpx;
					width: 34rpx;
					height: 100%;
					position: relative;
					flex-shrink: 0;

					.image {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
					}
				}

				.pwd {
					margin: 0 28rpx 0 0rpx;
					display: flex;
					justify-content: space-between;
					width: 100%;
					align-items: center;

					input {
						flex: 1;
					}

					.pwd-right {
						position: relative;
						right: 0rpx;
						width: 34rpx;
						height: 100%;

						.close {
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
						}

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}


			.paw {
				width: 140px;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 200;
				line-height: 40rpx;
				color: #FC6296;
				width: 100%;
				text-align: right;
				padding-right: 64rpx;
				margin: 24rpx 64rpx 24rpx 0;
			}
		}

		// 验证码login end

		// 立即登录按钮 start
		.login-btn {
			position: relative;
			height: 88rpx;
			background: #FC6296;
			opacity: 1;
			border-radius: 14rpx;
			color: #fff;
			margin: 0 56rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			margin-top: 104rpx;
		}

		.login-btn2 {
			position: relative;
			height: 88rpx;
			border: 1px solid #FC6296;
			opacity: 1;
			border-radius: 14rpx;
			color: #fff;
			margin: 0 56rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			margin-top: 14rpx;
			background-color: #fff;
			color: #FC6296;
		}


		// 立即登录end

		.reg-paw {
			margin: 32rpx 0;
			text-align: center;

			text {
				font-family: PingFangSC-Regular;
				font-weight: Regular;
				color: #999999;
				font-size: 28rpx;
				display: inline-block;
				min-width: 25%;
				position: relative;
			}

			// .wj_mh:before {
			//   position: absolute;
			//   height: 26rpx;
			//   width: 1px;
			//   background: #999;
			//   content: '';
			//   left: 0rpx;
			//   top: 8rpx;
			// }

		}

		// 快捷登录 start
		.quick {
			text-align: center;

			.quick-title {
				margin: 100rpx 0 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.txt {
					font-size: 24rpx;
					font-family: PingFang-SC-Regular;
					color: #999999;
				}

				.line {
					display: block;
					width: 160rpx;
					position: relative;

					&:after {
						content: "";
						position: absolute;
						z-index: 0;
						bottom: 0;
						left: 0;
						width: 100%;
						border-bottom: 1px solid #EEEEEE;
						transform: scaleY(0.5);
						transform-origin: 0 0;
					}
				}
			}

			image {
				width: 81rpx;
				height: 81rpx;
				margin: 0 35rpx;
			}
		}

		// 快捷登录 end
		.box-bottom {
			position: absolute;
			bottom: 60rpx;
			width: 100%;

			.agreement {
				display: flex;
				width: 100%;
				font-family: PingFangSC-Regular;
				font-size: 22rpx;
				color: #999;
				align-items: center;
				justify-content: center;

				.image {
					height: 24rpx;
					width: 24rpx;
					margin-right: 12rpx;
				}

				text {
					color: #FC6296 !important;
				}
			}

		}

	}

	.placeholderClass {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	// 主体 end
</style>